import Image from "next/image"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"

export default function DAServicePage() {
  return (
    <main className="min-h-screen bg-dark-blue relative">
   
      <div className="fixed inset-0 z-0">
       
        <div className="absolute inset-0 bg-dark-blue opacity-80 z-10"></div>
        
        <Image src="/images/background.jpeg" alt="Background" fill className="object-cover opacity-40 z-0" priority />
      </div>

      <div className="relative z-10">
        <Navbar />

       
        <section className="relative pt-20 flex flex-col items-center justify-center">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-10 mb-10">
            <div className="mx-auto max-w-7xl">
              <div className="relative overflow-hidden rounded-xl shadow-2xl">
                
                <div className="relative w-full">
                 
                  <img src="/images/da.jpg" alt="DA Service Dashboard" className="w-full h-auto blur-sm" />

                  
                  <div className="absolute inset-0 bg-dark-blue/30"></div>

                  
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="bg-bera-blue/40 backdrop-blur-sm text-gray-100 text-xl md:text-2xl font-medium py-5 px-10 rounded-full shadow-lg transform transition-transform hover:scale-105 hover:shadow-xl border border-bera-blue/50">
                      COMING SOON
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <Footer />
      </div>
    </main>
  )
}
